<template>
	<view class="settings-container">
		<view class="settings-list">
			<!-- 月经持续天数选择 -->
			<view class="settings-item" @click="showDurationPicker = true">
				<view class="item-left">
					<text class="item-icon duration-icon">⏱</text>
					<text class="item-label">月经持续天数</text>
				</view>
				<view class="item-value">
					<text>{{ menstrualDuration }}天</text>
					<text class="arrow">></text>
				</view>
			</view>
			
			<!-- 月经周期长度选择 -->
			<view class="settings-item" @click="showCyclePicker = true">
				<view class="item-left">
					<text class="item-icon cycle-icon">📊</text>
					<text class="item-label">月经周期长度</text>
				</view>
				<view class="item-value">
					<text>{{ cycleText }}</text>
					<text class="arrow">></text>
				</view>
			</view>
			
			<!-- 生日选择 -->
			<view class="settings-item" @click="showDatePicker = true">
				<view class="item-left">
					<text class="item-icon birthday-icon">🎂</text>
					<text class="item-label">生日</text>
				</view>
				<view class="item-value">
					<text>{{ birthdayText }}</text>
					<text class="arrow">></text>
				</view>
			</view>

			<!-- 绑定男友 -->
			<view class="settings-item" @click="showPartnerPopup = true">
				<view class="item-left">
					<text class="item-icon partner-icon">❤️</text>
					<text class="item-label">绑定男友</text>
				</view>
				<view class="item-value">
					<text>{{ partnerName || '未绑定' }}</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 清空数据按钮 -->
		<view class="clear-button" @click="showClearConfirm">
			<text>清空经期数据</text>
		</view>
		
		<!-- 月经持续天数选择器 -->
		<uni-popup ref="durationPopup" type="bottom" @change="handlePopupChange('duration')">
			<view class="picker-container">
				<view class="picker-header">
					<view class="cancel-btn" @click="showDurationPicker = false">取消</view>
					<view class="title">选择月经持续天数</view>
					<view class="confirm-btn" @click="confirmDuration">确定</view>
				</view>
				<picker-view class="picker" :value="durationIndex" @change="onDurationChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in durationRange" :key="index">
							{{ item }}天
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		
		<!-- 月经周期长度选择器 -->
		<uni-popup ref="cyclePopup" type="bottom" @change="handlePopupChange('cycle')">
			<view class="picker-container">
				<view class="picker-header">
					<view class="cancel-btn" @click="showCyclePicker = false">取消</view>
					<view class="title">选择月经周期长度</view>
					<view class="confirm-btn" @click="confirmCycle">确定</view>
				</view>
				<picker-view class="picker" :value="cycleIndex" @change="onCycleChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in cycleRange" :key="index">
							{{ item }}天
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		
		<!-- 生日日期选择器 -->
		<uni-popup ref="datePopup" type="bottom" @change="handlePopupChange('date')">
			<view class="picker-container">
				<view class="picker-header">
					<view class="cancel-btn" @click="showDatePicker = false">取消</view>
					<view class="title">选择生日</view>
					<view class="confirm-btn" @click="confirmDate">确定</view>
				</view>
				<picker-view class="picker" :value="dateIndex" @change="onDateChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in years" :key="index">
							{{ item }}年
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in months" :key="index">
							{{ item }}月
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item, index) in days" :key="index">
							{{ item }}日
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

		<!-- 绑定男友弹出层 -->
		<uni-popup ref="partnerPopup" type="center" @change="handlePopupChange('partner')">
			<view class="partner-container">
				<view class="partner-title">绑定男友</view>
				<input 
					class="partner-input" 
					type="text" 
					v-model="tempPartnerName"
					placeholder="请输入对方的ID" 
				/>
				<view class="partner-tips">绑定后对方可以查看您的经期记录</view>
				<view class="partner-buttons">
					<button class="partner-button cancel" @click="showPartnerPopup = false">取消</button>
					<button class="partner-button confirm" @click="confirmPartner">确定</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 清空数据确认弹窗 -->
		<uni-popup ref="clearPopup" type="center">
			<view class="confirm-container">
				<view class="confirm-title">确认清空</view>
				<view class="confirm-content">确定要清空所有经期数据吗？此操作不可恢复。</view>
				<view class="confirm-buttons">
					<button class="confirm-button cancel" @click="$refs.clearPopup.close()">取消</button>
					<button class="confirm-button confirm" @click="clearMenstrualData">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		const currentYear = new Date().getFullYear();
		const years = Array.from({length: 80}, (_, i) => currentYear - 80 + i + 1);
		const months = Array.from({length: 12}, (_, i) => i + 1);
		const days = Array.from({length: 31}, (_, i) => i + 1);
		
		// 初始化月经持续天数范围（3-10天）
		const durationRange = Array.from({length: 8}, (_, i) => i + 3);
		
		// 初始化月经周期范围（21-40天）
		const cycleRange = Array.from({length: 20}, (_, i) => i + 21);
		
		return {
			// 月经持续天数
			menstrualDuration: 5,
			durationRange: durationRange,
			durationIndex: [2], // 默认选中5天（索引为2）
			tempDurationIndex: [2],
			showDurationPicker: false,
			
			// 月经周期长度
			menstrualCycle: 28,
			cycleRange: cycleRange,
			cycleIndex: [7], // 默认选中28天（索引为7）
			tempCycleIndex: [7],
			showCyclePicker: false,
			
			// 生日
			birthday: '2000-01-01',
			years: years,
			months: months,
			days: days,
			dateIndex: [50, 0, 0], // 默认选中2000年1月1日
			tempDateIndex: [50, 0, 0],
			showDatePicker: false,
			
			// 绑定男友相关
			partnerName: '',
			tempPartnerName: '',
			showPartnerPopup: false
		}
	},
	computed: {
		// 周期显示文本
		cycleText() {
			return this.menstrualCycle + "天";
		},
		// 生日显示文本
		birthdayText() {
			const year = this.years[this.dateIndex[0]] || "NaN";
			return `${year}年`;
		}
	},
	watch: {
		showDurationPicker(val) {
			if (val) {
				this.$refs.durationPopup.open();
			} else {
				this.$refs.durationPopup.close();
			}
		},
		showCyclePicker(val) {
			if (val) {
				this.$refs.cyclePopup.open();
			} else {
				this.$refs.cyclePopup.close();
			}
		},
		showDatePicker(val) {
			if (val) {
				this.$refs.datePopup.open();
			} else {
				this.$refs.datePopup.close();
			}
		},
		showPartnerPopup(val) {
			if (val) {
				this.$refs.partnerPopup.open();
			} else {
				this.$refs.partnerPopup.close();
			}
		}
	},
	methods: {
		// 月经持续天数变化处理
		onDurationChange(e) {
			this.tempDurationIndex = e.detail.value;
		},
		
		// 确认月经持续天数
		confirmDuration() {
			this.durationIndex = this.tempDurationIndex;
			this.menstrualDuration = this.durationRange[this.durationIndex[0]];
			this.showDurationPicker = false;
			uni.setStorageSync('menstrualDuration', this.menstrualDuration);
			
			uni.showToast({
				title: '设置成功',
				icon: 'success'
			});
		},
		
		// 月经周期长度变化处理
		onCycleChange(e) {
			this.tempCycleIndex = e.detail.value;
		},
		
		// 确认月经周期长度
		confirmCycle() {
			this.cycleIndex = this.tempCycleIndex;
			this.menstrualCycle = this.cycleRange[this.cycleIndex[0]];
			this.showCyclePicker = false;
			uni.setStorageSync('menstrualCycle', this.menstrualCycle);
			
			uni.showToast({
				title: '设置成功',
				icon: 'success'
			});
		},
		
		// 生日日期变化处理
		onDateChange(e) {
			this.tempDateIndex = e.detail.value;
		},
		
		// 确认生日
		confirmDate() {
			this.dateIndex = this.tempDateIndex;
			const year = this.years[this.dateIndex[0]];
			const month = this.months[this.dateIndex[1]].toString().padStart(2, '0');
			const day = this.days[this.dateIndex[2]].toString().padStart(2, '0');
			this.birthday = `${year}-${month}-${day}`;
			this.showDatePicker = false;
			uni.setStorageSync('birthday', this.birthday);
			
			uni.showToast({
				title: '设置成功',
				icon: 'success'
			});
		},
		
		// 确认绑定男友
		confirmPartner() {
			if (!this.tempPartnerName.trim()) {
				uni.showToast({
					title: '请输入对方ID',
					icon: 'none'
				});
				return;
			}
			
			this.partnerName = this.tempPartnerName;
			uni.setStorageSync('partnerName', this.partnerName);
			this.showPartnerPopup = false;
			this.tempPartnerName = '';
			
			uni.showToast({
				title: '绑定成功',
				icon: 'success'
			});
		},
		
		// 弹出层状态变化处理
		handlePopupChange(type) {
			if (type === 'duration' && !this.showDurationPicker) {
				this.tempDurationIndex = [...this.durationIndex];
			} else if (type === 'cycle' && !this.showCyclePicker) {
				this.tempCycleIndex = [...this.cycleIndex];
			} else if (type === 'date' && !this.showDatePicker) {
				this.tempDateIndex = [...this.dateIndex];
			} else if (type === 'partner' && !this.showPartnerPopup) {
				this.tempPartnerName = '';
			}
		},
		
		// 显示清空数据确认弹窗
		showClearConfirm() {
			this.$refs.clearPopup.open();
		},
		
		// 清空经期数据
		clearMenstrualData() {
			// 这里添加清空数据的逻辑
			uni.removeStorageSync('menstrualRecords');
			uni.showToast({
				title: '数据已清空',
				icon: 'success'
			});
			this.$refs.clearPopup.close();
		},
		
		// 初始化数据
		initData() {
			// 读取存储的经期持续天数
			const storedDuration = uni.getStorageSync('menstrualDuration');
			if (storedDuration) {
				this.menstrualDuration = storedDuration;
				const index = this.durationRange.findIndex(d => d === storedDuration);
				if (index !== -1) {
					this.durationIndex = [index];
				}
			}
			
			// 读取存储的经期周期
			const storedCycle = uni.getStorageSync('menstrualCycle');
			if (storedCycle) {
				this.menstrualCycle = storedCycle;
				const index = this.cycleRange.findIndex(c => c === storedCycle);
				if (index !== -1) {
					this.cycleIndex = [index];
				}
			}
			
			// 读取存储的生日
			const storedBirthday = uni.getStorageSync('birthday');
			if (storedBirthday) {
				this.birthday = storedBirthday;
				const [year, month, day] = storedBirthday.split('-');
				const yearIndex = this.years.findIndex(y => y === parseInt(year));
				const monthIndex = this.months.findIndex(m => m === parseInt(month));
				const dayIndex = this.days.findIndex(d => d === parseInt(day));
				
				if (yearIndex !== -1 && monthIndex !== -1 && dayIndex !== -1) {
					this.dateIndex = [yearIndex, monthIndex, dayIndex];
				}
			}
			
			// 读取存储的伴侣信息
			const storedPartner = uni.getStorageSync('partnerName');
			if (storedPartner) {
				this.partnerName = storedPartner;
			}
		}
	},
	mounted() {
		this.initData();
	}
}
</script>

<style lang="scss" scoped>
.settings-container {
	padding: 20rpx;
	background-color: $background-color;
	min-height: 100vh;
}

.settings-list {
	background-color: $white;
	border-radius: 12rpx;
	overflow: hidden;
}

.settings-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.settings-item:last-child {
	border-bottom: none;
}

.item-left {
	display: flex;
	align-items: center;
}

.item-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
	font-size: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-label {
	font-size: 28rpx;
	color: #333333;
}

.item-value {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: $brand-theme-color;
}

.arrow {
	margin-left: 10rpx;
	color: #cccccc;
}

.clear-button {
	margin-top: 40rpx;
	background-color: $white;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	border-radius: 45rpx;
	color: $brand-theme-color;
	font-size: 30rpx;
}

.picker-container {
	background-color: $white;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
}

.picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.cancel-btn {
	color: #999999;
	font-size: 28rpx;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}

.confirm-btn {
	color: $brand-theme-color;
	font-size: 28rpx;
}

.picker {
	height: 480rpx;
	width: 100%;
}

.picker-item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80rpx;
	font-size: 28rpx;
}

.partner-container {
	background-color: $white;
	border-radius: 24rpx;
	width: 600rpx;
	padding: 40rpx;
}

.partner-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.partner-input {
	border: 1rpx solid #EEEEEE;
	border-radius: 12rpx;
	height: 80rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.partner-tips {
	font-size: 24rpx;
	color: #999999;
	text-align: center;
	margin-bottom: 30rpx;
}

.partner-buttons, .confirm-buttons {
	display: flex;
	justify-content: space-between;
	gap: 20rpx;
}

.partner-button, .confirm-button {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 28rpx;
}

.partner-button.cancel, .confirm-button.cancel {
	background-color: #F5F5F5;
	color: #666666;
}

.partner-button.confirm, .confirm-button.confirm {
	background-color: $brand-theme-color;
	color: $white;
}

.confirm-container {
	background-color: $white;
	border-radius: 24rpx;
	width: 600rpx;
	padding: 40rpx;
}

.confirm-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.confirm-content {
	font-size: 28rpx;
	color: #666666;
	text-align: center;
	margin-bottom: 30rpx;
}

.warning-text {
	color: #FF6666;
}
</style>